<template>
    <div id="googleHistory" class="googleMap"></div>
</template>

<script>
    export default {
        props: {
            imei: String
        },
        data () {
            return {
                map: null,         // 地图对象
                points: [],      // 所有点集合
                centerPoint: null, // 中间点
                car: null,
                index: 0, //记录播放到第几个point
                timer: null,
                count: 60, // 帧数
                time: 50, // 速度
            }
        },
        methods: {
            getSpeed (per) {
                this.time = (100 - per) / 50 * 60
            },
            /***
             * 此处调用函数，根据传入的位置数据，得到轨迹信息
             * 所需坐标点集合格式为
             *    let points = [
             *        [113.9394600, 22.553278],
             *        [113.9195983, 22.553173],
             *        [113.9393583, 22.523433],
             *        [113.9195553, 22.523033]
             *    ]
             */
            getTrail (data) {
                let points = []
                for (let item of data.historyRecordDTOS) {
                    let coordinate = wgs84togcj02(Number(item.longitude), Number(item.lat))
                    points.push([coordinate[0], coordinate[1]])
                }
                /**
                 * 将坐标点转换为帧，
                 * 读取到每一帧，就setPosition一次
                 */
                if (points.length === 0) {
                    return
                } else if (points.length === 1) {
                    this.points.push({
                        lng: points[0][0],
                        lat: points[0][1]
                    })
                } else {
                    for (let k = 0; k < points.length - 1; k++) {
                        let x = points[k + 1][0] - points[k][0]
                        let y = points[k + 1][1] - points[k][1]
                        for (let i = 0; i < this.count; i++) {
                            this.points.push({
                                lng: points[k][0] + i * x / this.count,
                                lat: points[k][1] + i * y / this.count
                            })
                        }
                    }
                }
                this.drawHistoryTrail()
            },
            drawHistoryTrail () {
                this.centerPoint = {
                    lng: (this.points[0].lng + this.points[this.points.length - 1].lng) / 2,
                    lat: (this.points[0].lat + this.points[this.points.length - 1].lat) / 2
                }
                this.map.panTo(this.centerPoint)
                let flightPath = new google.maps.Polyline({
                    path: this.points,
                    geodesic: true,
                    strokeColor: '#FF0000',
                    strokeOpacity: 1.0,
                    strokeWeight: 2
                })
                flightPath.setMap(this.map)
                new google.maps.Marker({    // 起始点图标
                    position: this.points[0],
                    icon: 'static/images/start.png',
                    map: this.map,
                    zIndex: 100
                })
                new google.maps.Marker({    // 结束点图标
                    position: this.points[this.points.length - 1],
                    icon: 'static/images/stop.png',
                    map: this.map,
                    zIndex: 101
                })
                //显示小车子
                this.car = new google.maps.Marker({
                    position: this.points[0],
                    icon: 'static/images/icon_1_online.png',
                    map: this.map,
                    zIndex: 102
                })
            },
            play () {
                /**
                 * 当前点的index小于点数组的长度 ，就++;并且继续调用play，直到index与长度相等
                 */
                if (this.car === null) {
                    this.$emit('fromMap', 'reset')
                    return
                }
                let point = this.points[this.index]
                this.car.setPosition(point)
                this.index++
                this.map.panTo(point)
                if (this.index < this.points.length) {
                    this.timer = window.setTimeout(this.play, this.time)
                } else {
                    this.map.panTo(point)
                    this.$emit('fromMap', 'playOver')
                }
            },
            pause () {
                if (this.timer) {
                    window.clearTimeout(this.timer)
                }
            },
            reset () {
                if (this.timer) {
                    window.clearTimeout(this.timer)
                }
                this.index = 0
                this.car.setPosition(this.points[0])
                this.map.panTo(this.centerPoint)
                this.$emit('fromMap', 'reset')
            }
        },
        mounted () {
            let point = {lat: 22.560118, lng: 113.956033} //中心点
            this.map = new google.maps.Map(document.getElementById('googleHistory'), {//创建谷歌地图
                center: point,                       //地图的中心点
                zoom: 13,               　　　　　　　　　　  //地图缩放比例
                mapTypeId: google.maps.MapTypeId.ROADMAP,   //指定地图展示类型：卫星图像、普通道路
                scrollwheel: true,          　　　　　　　　　 //是否允许滚轮滑动进行缩放
                zoomControlOptions: {                      //缩放控件
                    position: google.maps.ControlPosition.TOP_LEFT  //设置位置 左上
                },
                //地图类型控件
                mapTypeControlOptions: {
                    position: google.maps.ControlPosition.TOP_RIGHT
                },
                //街景小人控件
                streetViewControlOptions: {
                    position: google.maps.ControlPosition.TOP_LEFT
                },
                // 启用缩放
                scaleControl: true,
            })
        },
    }
</script>

<style scoped>
    .googleMap {
        height: 93vh;
    }
</style>
